<!--文件管理-->
<template>
  <div class="documentContainer flex-main ">
    <div style="padding: 0 10px;background: #fff; margin-bottom: 10px;">
      <div class="flex-row" style="align-items: center;height: 50px;">
        <div v-if="fileAllPath.length>0 " style="flex: 1;">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="(item,index) in fileAllPath" :key="item.index">
              <el-link v-if="index != fileAllPath.length-1" :underline="false" @click="handleBreacrumb(item)">
                {{ item.catalogName }}
              </el-link>
              <el-link v-if="index == fileAllPath.length-1" :underline="false">
                {{ item.catalogName }}
              </el-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>
    <!--列表-->
    <div class="table-container flex-row">
      <div class="conmmon-container-main" style="padding: 0px 10px 0px 0px;">
        <div class="table-container flex-main">
          <div class="table-container-header flex-row">
            <div style="flex: 1;">
              <template v-if="filePath[0]">
                <el-button-group v-if="filePath[0].catalogType==2 || filePath[0].catalogType==3">
                  <el-button>
                    <simple-uploader :mode="['image','file']" :catalog="catalogId" type="text" @uploadResult="handleRefresh" />
                  </el-button>
                  <el-button icon="el-icon-folder-add" @click="handleCreateFolder">新建文件夹</el-button>
                  <el-button icon="el-icon-folder-delete" @click="handleRemoveFolder">删除文件夹</el-button>
                </el-button-group>
              </template>
            </div>
            <el-input v-model="listQuery.keyword" placeholder="请输入关键字" style="width:235px;margin-right:10px" @keyup.enter.native="handleFilter" />
            <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh" />
            </el-tooltip>
          </div>
          <el-table
            ref="multipleTable"
            :data="fileList"
            header-cell-class-name="table-header"
            fit
            height="100%"
            highlight-current-row
            @row-click="handleRowClick"
            @sort-change="sortChange">
            <el-table-column label="名称" prop="originalFileName" sortable min-width="260" show-overflow-tooltip row-class-name="file-icon">
              <template slot-scope="scope">
                <file-viewer :type="scope.row.fileType" :url="scope.row.fileUuid" :title="scope.row.originalFileName" />
                {{ scope.row.originalFileName }}.{{ scope.row.fileExt }}
              </template>
            </el-table-column>

            <el-table-column label="类型" prop="fileExt" width="100" align="center">
              <template slot-scope="scope">
                <span style="margin-right:5px">{{ scope.row.fileExt }}</span>文件
              </template>
            </el-table-column>
            <el-table-column label="大小" prop="fileSize" sortable align="center" width="140">
              <template slot-scope="scope">
                {{ scope.row.fileSize | formatFileSize }}
              </template>
            </el-table-column>
            <el-table-column label="来源" prop="fileComeSource" width="100" align="center" show-overflow-tooltip />
            <el-table-column label="最后修改" prop="gmtModified" align="center" width="140">
              <template slot-scope="scope">
                {{ scope.row.gmtModified | formatDate }}
              </template>
            </el-table-column>
            <el-table-column label="上传时间" prop="gmtCreated" align="center" width="140">
              <template slot-scope="scope">
                {{ scope.row.gmtCreated | formatDate }}
              </template>
            </el-table-column>
            <el-table-column label="上传者" prop="realName" align="center" width="100">
              <template slot-scope="scope">
                <span class="color-primary"> {{ scope.row.realName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="" align="center" min-width="110">
              <template slot-scope="scope">
                <button-option v-if="scope.row.isCollected==0" skin="primary" icon="el-icon-star-off" title="添加收藏" @click="handleCollection(scope.row,1)" />
                <button-option v-if="scope.row.isCollected==1" skin="danger" icon="el-icon-star-on" title="取消收藏" @click="handleCollection(scope.row,0)" />
                <el-dropdown trigger="click" style="margin-left:10px">
                  <span class="el-dropdown-link">
                    <button-option icon="el-icon-more-outline" skin="primary" title="更多" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="0">查看</el-dropdown-item>
                    <el-dropdown-item command="a" divided>共享</el-dropdown-item>
                    <el-dropdown-item command="e" @click.native="doRename(scope.row,'0')">重命名</el-dropdown-item>
                    <el-dropdown-item command="f">下载</el-dropdown-item>
                    <el-dropdown-item command="g" icon="el-icon-delete" style="color:red" divided @click.native="moveToRecycleBin(scope.row)">移至回收站</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination_handler">
            <div class="fl color-danger" style="height:50px;line-height:50px;padding-left:20px">
              {{ fileList.length }}个项目,共<span class="color-primary">{{ totalFileSize | formatFileSize }}</span>
            </div>
            <pagination v-show="pageTotal>0" :total="pageTotal" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
          </div>
        </div>
      </div>
      <div class="conmmon-container-left scroll__y__content scrollbar-no-width" style="width:280px;border-left: 1px solid #E6E6E6;padding: 0px; margin: 0px;">
        <div v-if="catalogId" class="flex-main filePropertyPanel">
          <div class="__header flex-row">
            <div class="file-icon">
              <file-catalog-svg-icon v-if="currentSelectedData.isFile == false" :type="currentSelectedData.catalogType" />
              <file-viewer v-if="currentSelectedData.isFile == true" :type="currentSelectedData.fileType" :url="currentSelectedData.fileUuid" :title="currentSelectedData.originalFileName" />
            </div>
            <div class="file-name ">
              <div class="name">
                <span v-if="currentSelectedData.isFile" class="name-text">{{ currentSelectedData.originalFileName }}</span>
                <span v-if="!currentSelectedData.isFile" class="name-text">
                  {{ currentSelectedData.catalogName }}
                  <copy-text v-if="filePath[0].catalogType==2 || filePath[0].catalogType==3" :content="catalogId" :show="false" />
                  <el-tooltip v-if="(filePath[0].catalogType==2 || filePath[0].catalogType==3) && currentSelectedData.isBuiltIn===0" content="重命名" placement="bottom">
                    <i class="el-icon-edit color-primary common-cursor" style="margin-left: 8px;" @click="doRename(currentSelectedData,'1')" />
                  </el-tooltip>
                </span>
              </div>
              <div class="desc">
                <span v-if="currentSelectedData.isFile" class="info-item info-item-size">
                  {{ currentSelectedData.fileSize | formatFileSize }}
                </span>
                <span v-if="currentSelectedData.isFile" class="info-item">, </span>
                <span class="info-item info-item-time"> {{ currentSelectedData.gmtCreated | formatDate }} </span>
              </div>
            </div>

          </div>
          <div style="" class="__body">
            <div class="file-info-basic info-group has-content show-more-allow">
              <div class="p info-item-path" style="line-height:25px">
                <div class="title">路径:</div>
                <div class="content" style="color: #aaa;padding:0px">
                  <template v-for="(item,index) in fileAllPath">
                    <span :key="index" class="link ripple-item">
                      {{ item.catalogName }}
                      <i v-if="!currentSelectedData.isFile && index != fileAllPath.length-1">/</i>
                      <i v-if="currentSelectedData.isFile">/</i>
                    </span>

                  </template>
                  <span v-if="currentSelectedData.isFile" class="link ripple-item">{{ currentSelectedData.originalFileName }}.{{ currentSelectedData.fileExt }}</span>
                </div>
                <div class="clearfix" />
              </div>
              <div v-if="currentSelectedData.isFile" class="p">
                <div class="title">标识:</div>
                <div class="content"> <copy-text :content="currentSelectedData.fileUuid" position="left" /></div>
                <div class="clearfix" />
              </div>
              <div v-if="currentSelectedData.isFile" class="p info-item-size">
                <div class="title">大小:</div>
                <div class="content"> {{ currentSelectedData.fileSize | formatFileSize }} <span>({{ currentSelectedData.fileSize }} Byte)</span></div>
                <div class="clearfix" />
              </div>
              <div class="p">
                <div class="title">创建时间:</div>
                <div class="content">{{ currentSelectedData.gmtCreated | formatDate }}</div>
                <div class="clearfix" />
              </div>
              <div class="p">
                <div class="title">修改时间:</div>
                <div class="content">{{ currentSelectedData.gmtModified | formatDate }}</div>
                <div class="clearfix" />
              </div>
              <div class="p">
                <div class="title">创建者:</div>
                <div class="content">
                  <span class="name">
                    <template v-if="currentSelectedData.isBuiltIn===1">内置</template>
                    <template v-else>
                      {{ currentSelectedData.realName }}({{ currentSelectedData.userName }})
                    </template>
                  </span>
                </div>
                <div class="clearfix" />
              </div>
              <div v-if="currentSelectedData.isFile" class="p">
                <div class="title">URL:</div>
                <div class="content">
                  <copy-text :content="global.getFileView(currentSelectedData.fileUuid)" position="left" />
                </div>
                <div class="clearfix" />
              </div>
              <template v-if="currentSelectedData.isFile == false">
                <div v-if="currentSelectedData.isEncryption===1" class="p ">
                  <div class="title">是否加密:</div>
                  <div class="content">
                    <span class="name color-danger"> 加密 </span>
                  </div>
                  <div class="clearfix" />
                </div>
                <div v-if="currentSelectedData.isAllowNewFile===0" class="p ">
                  <div class="title">新建文件:</div>
                  <div class="content">
                    <span class="name color-danger">不允许</span>
                  </div>
                  <div class="clearfix" />
                </div>
                <div v-if="currentSelectedData.isAllowNewFolder===0" class="p ">
                  <div class="title">新建文件夹:</div>
                  <div class="content">
                    <span class="name color-danger">不允许</span>
                  </div>
                  <div class="clearfix" />
                </div>
                <div v-if="currentSelectedData.isAllowRead===1" class="p ">
                  <div class="title">是否只读:</div>
                  <div class="content">
                    <span class="name color-danger">只读</span>
                  </div>
                  <div class="clearfix" />
                </div>
                <div v-if="currentSelectedData.isAllowDeleted===0" class="p ">
                  <div class="title">允许删除:</div>
                  <div class="content">
                    <span class="name color-danger">不允许</span>
                  </div>
                  <div class="clearfix" />
                </div>

              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--重命名-->
    <el-dialog :visible.sync="renameVisible" :close-on-click-modal="false" title="重命名" width="500px">
      <el-input v-model="recordForm.fileName" placeholder="请输入名称" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="renameVisible = false">取消</el-button>
        <el-button :loading="renameLoading" type="primary" @click="doRenameFile">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
export default {
  components: { },
  props: {
    catalogId: {

      type: String,
      default: ''
    },
    node: {
      type: Object,
      default() {
        return {}
      }
    },
    filePath: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      currentUploadFile: '',
      fileList: [],
      totalFileSize: 0,
      pageTotal: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        keyword: undefined,
        sort: this.common.SORT_DEFAULT
      },
      fileAllPath: [],
      currentSelectedData: {},
      // 类型0：文件夹，1：文件
      recordForm: {

      },
      renameLoading: false,
      renameVisible: false
    }
  },
  computed: {

  },
  watch: {
    catalogId: function(val) {
      this.listQuery.catalogId = this.catalogId
      this.fetchData()
    },
    currentUploadFile: function(val) {
      this.fetchData()
    },
    filePath: {
      handler(val) {
        this.fileAllPath = val
      },
      deep: true
    },
    node: {
      handler(val) {
        this.currentSelectedData = val
        this.currentSelectedData.isFile = false
      },
      deep: true
    }
  },
  created() {
    this.fileAllPath = this.filePath
    this.currentSelectedData = this.node
    this.currentSelectedData.isFile = false
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    /**
     * 刷新
     */
    handleRefresh() {
      this.listQuery.sort = this.common.SORT_DEFAULT
      this.listQuery.page = 1
      this.listQuery.keyword = ''
      this.fetchData()
    },
    async fetchData() {
      const fileResourcesgResponse = await this.$store.dispatch('fileResourcesPage', this.listQuery)
      this.fileList = fileResourcesgResponse.records
      this.totalFileSize = 0
      for (var item of this.fileList) {
        this.totalFileSize += item.fileSize
      }
      this.pageTotal = fileResourcesgResponse.total
    },
    /**
     * 表格列排序
     */
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = this.common.SORT_DEFAULT
      }
      this.handleFilter()
    },
    handleBreacrumb(item) {
      this.listQuery.catalogId = item.id
      const index = this.getArrIndex(this.fileAllPath, item)
      if (index >= 0) {
        this.fileAllPath = this.fileAllPath.slice(0, index + 1)
      }
      this.handleFilter()
    },
    getArrIndex(arr, obj) {
      let index = null
      const key = Object.keys(obj)[0]
      arr.every(function(value, i) {
        if (value[key] === obj[key]) {
          index = i
          return false
        }
        return true
      })
      return index
    },
    handleRowClick(row) {
      this.currentSelectedData = row
      this.currentSelectedData.isFile = true
    },
    handlerRefresh() {
    },

    /* 新增*/
    handleCreateFolder() {
      if (this.currentSelectedData.isAllowNewFolder === 0) {
        this.msgWarning('不允许新建文件夹！')
        return
      }
      this.$emit('handleEvent', 'newFolder')
    },
    handleRemoveFolder() {
      if (this.currentSelectedData.isAllowDeleted === 0) {
        this.msgWarning('不允许删除文件夹！')
        return
      }
      this.$emit('handleEvent', 'removeFolder')
    },
    doRename(row, type) {
      var fileName = null
      if (type === '0') {
        fileName = row.originalFileName
      } else {
        fileName = row.catalogName
      }
      this.recordForm = {
        id: row.id,
        fileType: type,
        fileName: fileName
      }
      this.renameVisible = true
    },
    doRenameFile() {
      this.recordForm.renameLoading = true
      if (this.recordForm.fileType === '0') {
        this.$store.dispatch('fileResourcesRename', { id: this.recordForm.id, originalFileName: this.recordForm.fileName }).then(response => {
          this.renameVisible = false
          this.renameLoading = false
          this.msgSuccess('文件重命名成功')
          this.handleFilter()
        }).catch(() => {
          this.renameLoading = false
        })
      } else {
        this.$store.dispatch('updateCatalogNameById', { id: this.recordForm.id, catalogName: this.recordForm.fileName }).then(response => {
          this.renameVisible = false
          this.renameLoading = false
          this.msgSuccess('文件夹重命名成功')
          this.currentSelectedData = {
            ...this.currentSelectedData,
            catalogName: this.recordForm.fileName
          }
        }).catch(() => {
          this.recordForm.reNameLoading = false
        })
      }
    },

    // 移入回收站
    moveToRecycleBin(item) {
      this.$confirm('您确定将此文件移入回收站,是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('fileResourcesMoveToRecycleBin', { fileId: item.id, type: this.filePath[0].catalogType === 3 ? 0 : 1 }).then(response => {
          this.msgSuccess('操作成功')
          this.handleFilter()
        }).catch(() => {})
      }).catch(() => {})
    },
    handleCollection(item, type) {
      if (type === 1) {
        this.$store.dispatch('fileResourcesCollectionAdd', { fileId: item.id }).then(response => {
          this.msgSuccess('收藏成功')
          this.handleFilter()
        }).catch(() => {
        })
      } else {
        this.$store.dispatch('fileResourcesCollectionCancel', { fileId: item.id }).then(response => {
          this.msgSuccess('取消收藏成功')
          this.handleFilter()
        }).catch(() => {
        })
      }
    }

  }
}
</script>

<style lang="scss" >
 .documentContainer{
  height: 100%;
  .fileCatalogTab{
    .el-tabs__item{
      font-size: 12px !important;
    }
  }
  .el-table__header tr th{
    background-color: #fff !important;
  }
  .table-container-header{
    svg{
      margin-right: 5px;
      width: 1.2em;
      height: 1.2em;
    }
  }
  .file-icon{
    svg{
      width: 1.6em;
      height: 1.6em;
    }
  }
  .refresh-icon{
    cursor:pointer;
    font-size: 25px;
    padding: 3px 0px;
    color:#a5b5ce
  }
  .refresh-icon:hover{
    color:#409EFF
  }
  .el-tabs__header{
    margin-bottom: 0px;
  }
  .el-tabs__item{
    padding: 0 5px;
  }
  .filePropertyPanel{
    .__header{
      height: 66px;
      background: #f6faff;
      background-image: linear-gradient(190deg, #e5f6ff, #fdfeff);
      border-bottom: 1px solid #eee;
      position: relative;
      z-index: 2;
      padding: 8px 6px;
      .file-icon{
        svg{
          width: 50px;
          height: 50px;
        }
        img{
          width: 50px;
          height: 50px;
        }
      }
      .file-name {
        margin-left: 10px;
        .name {
          max-height: 35px;
          line-height: 1.2em;
          padding-top: 7px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 15px;
          color: #666;
          word-break: break-all;
          .name-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
        .desc {
          font-size: .9em;
          color: #aaa;
          padding-top: 1px;
          white-space: nowrap;
        }
      }
    }
    .__body{
      height:100%;
      overflow: auto;
      padding: 10px;
      .p{
        padding-left: 15px;
        padding-right: 10px;
        line-height: 20px;
        margin-bottom: 0px;
        .title {
          float: left;
          color: #999;
          text-align: left;
          padding: 0;
          margin: 0;
          line-height: 25px;
          width: 27%;
          margin-right: 1%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .content {
          float: left;
          word-break: break-all;
          color: #444;
          width: 72%;
          margin: 0;
          padding: 5px 0 0 0;
          position: relative;
          -khtml-user-select: text;
          -webkit-touch-callout: text;
          -webkit-user-select: text;
          -moz-user-select: text;
          -ms-user-select: text;
          -o-user-select: text;
          user-select: text;
          font-size: 1em;
        }
      }
    }

  }
 }
</style>
